
import React, { Component } from 'react'
import { flushSync } from 'react-dom'
// react18中所有的更新都是批量更新，因此输出是 0 0 1 1
class NewBatchUpdatePage extends Component {
  state = { number: 0 }
  handleCLick = () => {
    this.setState({ number: this.state.number + 1 });
    console.log("number", this.state.number);
    this.setState({ number: this.state.number + 1 });
    console.log("number", this.state.number);
    setTimeout(() => {
    //   flushSync(() => {
        this.setState({ number: this.state.number + 1 });
    //   });
      console.log("number", this.state.number);
    //   flushSync(() => {
        this.setState({ number: this.state.number + 1 });
    //   });
      console.log("number", this.state.number);
    }, 0);
  };

  render() {
    return (
      <div>
        <p>{this.state.number}</p>
        <button onClick={this.handleCLick}>+</button>
      </div>
    );
  }
}
export default NewBatchUpdatePage